<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ad{
            width: 400px;
            height: 400px;
            background-color: antiquewhite;
            position: relative;
        }
        .close{
            width: 40px;
            height: 40px;
            position: absolute;
            right: 0;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div class="dbox">
        <div class="xbox">
            <p>这是文本标签</p>
            <div class="sbox">你好，这是最小的盒子</div>
            <h3>这是弟弟</h3>
        </div>
        <div class="xbox1">第二个盒子</div>
    </div>
    <div class="ad">
        <div class="close">x</div>
    </div>
    <script>
        //创建新的节点
        let d = document.createElement('div');
        d.innerHTML="这是追加的内容";
        const em4 = document.querySelector('.xbox1');
        //将一个节点追加到父节点的所有子节点的末尾
        em4.appendChild(d);

        let c = document.createElement('p');
        c.innerHTML = "这是追加的内容2";
        em5.insertBefore('p','.close');

    </script>
    <script>
        //获取子节点
       const box=document.querySelector('.dbox');
       console.log(box.firstChild);
       console.log(box.firstElementChild);
       console.log(box.children);
       console.log(box.childNodes);
       //获取父节点
       const em2 = document.querySelector('.close');
       em2.addEventListener('click',function(){
            console.log(em2.parentNode);
            // console.log(em2.parentElement);
            em2.parentNode.style.display='none';
       },false)

       //获取兄弟节点
       const em3 = document.querySelector('.sbox');
       console.log(em3.previousElementSibling);
       console.log(em3.nextSibling);


    </script>
</body>
</html>